<template>
  <div class="hotList">
    <div class="browse-header"><i class="el-icon-magic-stick"></i> 热卖单品
      <router-link class="list-group-item" active-class="active" to="/paybook"><span class="more">>>逛逛更多</span></router-link>
    </div>
    <div class="content">
      <el-carousel :autoplay="false" indicator-position="none">
        <el-carousel-item v-for="group in groupCount" :key="group">
          <el-row>
            <el-col v-for="(b,index) in hotList.slice((group*4),(group+1)*4)" :key="index+group*4">
              <el-card :body-style="{ padding: '0px' }">
                <div class="conntent">
                  <router-link class="list-group-item" :to="`/purchasePage?curBookId=${b.id}`">
                    <img class="browseImg" :src="$store.state.baseImgUrl+b.img"><br>
                    <div class="title">{{ b.name }}</div>
                  </router-link>
                  <div class="footer">
                    <span class="price">￥{{ b.price|rounding }}元</span>
                    <span class="payedNum">销量<span class="num">{{ b.saleCount }}</span></span>
                  </div>
                </div>
              </el-card>
            </el-col>
          </el-row>
        </el-carousel-item>
      </el-carousel>
    </div>
  </div>
</template>

<script>
export default {
  name: "Hot.vue",
  data() {
    return {
      hotList: [],
      bookQuery: {
        pageSize:8,
        sort: 'sale'
      },
    }
  },
  computed: {
    groupCount() {
      let number = Math.ceil(this.hotList.length / 4);
      let arr = []
      for (let i = 0; i < number; i++) {
        arr.push(i)
      }
      return arr
    }
  },
  created() {
    this.getRequest('/p/pms/book/customList', this.bookQuery).then((resp) => {
      console.log(resp)
      this.hotList = resp.data.list
    })
  }
}
</script>

<style scoped>
.hotList {
  width: 100%;
  height: 405px;
  margin: 80px auto;
  border: 1px solid #f3a8a8;
  border-top: none;
  float: left;
}

.browse-header {
  font: 400 24px 华文宋体;
  padding: 17px 15px 14px 15px;
  border: 1px solid #f3a8a8;
  background: #f5b7b7;
  color: #4c4c4c;
  letter-spacing: 1px;
}
.more{
  float: right;
  font-size: 18px;
  padding-top: 2px;
}
.el-col {
  width: 18%;
  margin: 37px 0px 20px 5.55%;
}

.browseImg {
  padding: 15px 20px 5px 20px;
  width: 83%;
  height: 163px;
}

.title, .footer {
  color: black;
  width: 83%;
  border: none;
  margin-left: 21px;
}

.footer {
  width: 81.1%;
  margin-left: 17px;
  padding-bottom: 9px;
}

.payedNum {
  float: right;
  position: relative;
  top:-5px;
}

.title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.price, .num {
  color: #d74f54;
}



::v-deep .el-carousel__arrow {
  width: 60px;
  height: 60px;
  background: #f89ca8;
  opacity: 0.3;
  font-size: 30px;
  font-weight: bold;
}


.list-group-item:hover {
  text-decoration: underline;
}
.num{
  font-weight: bold;
  font-size: 20px;
}

.list-group-item :hover{
  text-decoration: underline;
  color: #f56363;
  text-shadow: 1px -1px 1px gray;
}
</style>